
<template>
  <quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
  ></quill-editor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
//import 'quill/dist/quill.core.css'
//import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'; // 富文本基于quill
export default {
  name: "edit",
  components:{
      quillEditor
   },
  data() {
    return {
      editor: null, // 富文本编辑器对象
      content: `<p></p><p><br></p><ol></ol>`, // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: "#toolbar",
        },
        theme: "snow",
        placeholder: "请输入正文",
      },
    };
  },
  mounted:function(){
    this.editor = this.$refs.myQuillEditor.quill;
  },
  beforeDestroy:function(){
      this.editor = null;
     delete this.editor;
  },methods:{
      onEditorReady (editor) {},
// 富文本编辑器 失去焦点事件
onEditorBlur (editor) {},
// 富文本编辑器 获得焦点事件
onEditorFocus (editor) {},
// 富文本编辑器 内容改变事件
onEditorChange (editor) {},
  }
};
</script>